<script setup lang="ts" name="userTopRight">
defineProps<{
  total: { followedTotal: number; followigTotal: number; columnTotal: number; articleTotal: number }
}>()
</script>

<template>
  <div id="userTopRight">
    <p>
      <Bell class="svg" />
      <b>订阅数</b>
      <span>{{ total.followigTotal }}</span>
    </p>
    <p>
      <Connection class="svg" />
      <b>粉丝数</b>
      <span>{{ total.followedTotal }}</span>
    </p>
    <p>
      <Expand class="svg" />
      <b>专栏数</b>
      <span>{{ total.columnTotal }}</span>
    </p>
    <p>
      <Document class="svg" />
      <b>作品数</b>
      <span>{{ total.articleTotal }}</span>
    </p>
  </div>
</template>

<style scoped lang="less">
#userTopRight {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.svg {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin: 0 4px;
  color: var(--color2);
}

p {
  display: block;
  text-align: center;
  white-space: nowrap;
  color: var(--color2);

  > b {
    font-size: 14px;
    vertical-align: middle;
  }
  > span {
    display: block;
    text-align: center;
    height: 24px;
    line-height: 24px;
  }
}
</style>
